@import "base";


.am-icon{
    width:px2rem(80px, $base-font-size);
    height:px2rem(80px, $base-font-size);
}
.bind-button{
    margin-top: px2rem(40px, $base-font-size);
}
.moon-bg{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #6f2cac;
    .moon-index-content{
        color: #fff;
        @include px2px('font-size',24);
        background: url(../imgs/bg@3x.png);
        background-color: #6f2cac;
        background-repeat: no-repeat;
        background-size: 100%;
        padding: px2rem(40px, $base-font-size);
        padding-top: px2rem(240px, $base-font-size);
        .moon-index-wfgl{
            text-align: center;
            color: #fff;
            margin-bottom: px2rem(16px, $base-font-size);
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width: px2rem(60px, $base-font-size);
                border-radius: 50%;
                margin: 0 px2rem(10px, $base-font-size);
            }
        }
        .moon-index-goods-list{
            display: flex;
            flex-wrap: wrap;
            margin-top: px2rem(40px, $base-font-size);
            .moon-index-goods{
                text-align: center;
                color: #fff;
                padding: px2rem(40px, $base-font-size) px2rem(54px, $base-font-size);
                display: flex;
                flex-direction: column;
                margin-bottom: px2rem(20px, $base-font-size);
                img{
                    width: px2rem(114px, $base-font-size);
                }
                .moon-index-goods-title{
                    margin-top: px2rem(26px, $base-font-size);
                }
            }
            .active{
                background: #8C50CB;
                border-radius: px2rem(20px, $base-font-size);
                position: relative;
                .chose{
                    background: url(../imgs/chose@3x.png);
                    background-repeat: no-repeat;
                    background-size: 100%;
                    width: px2rem(66px, $base-font-size);
                    height: px2rem(66px, $base-font-size);
                    position: absolute;
                    top: px2rem(20px, $base-font-size);
                    right: px2rem(30px, $base-font-size);
                }
                .moon-index-goods-title{
                    margin-top: px2rem(26px, $base-font-size);
                }
            }
            .sure{
                padding: 0;
                text-align: center;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                img{
                    width: px2rem(214px, $base-font-size);
                    margin-bottom: px2rem(10px, $base-font-size);
                }
            }
        }
    }

    .moon-answer-cai{
        color: #FFDA44;
        text-align: center;
        padding: px2rem(14px, $base-font-size) px2rem(20px, $base-font-size);
        border: 1px solid #FFDA44;
        border-radius: px2rem(25px, $base-font-size);
        margin-top: px2rem(25px, $base-font-size);
    }

    .moon-index-hdgz{
        text-align: center;
        padding: px2rem(18px, $base-font-size) 0;
        color: #fff;
        background-color: #542086;
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .answer-result{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        .answer-result-content{
            width: px2rem(600px, $base-font-size);
            height: px2rem(748px, $base-font-size);
            background: url('../imgs/answer@2x.png');
            background-size: 100%;
            background-repeat: no-repeat;
            z-index: 10000;
            position: relative;
            color: #fff;
            .answer-notice-top{
                width: 80%;
                margin: px2rem(40px, $base-font-size) auto;
                @include px2px('font-size',28);
                line-height: px2rem(50px, $base-font-size);
            }
            .answer-notice-top-1{
                width: 80%;
                margin: px2rem(360px, $base-font-size) auto;
                margin-bottom: 0;
                text-align: center;
            }
            .answer-notice-top-2{
                width: 80%;
                margin: px2rem(20px, $base-font-size) auto;
                margin-bottom: 0;
                text-align: center;
            }
            .answer-wyc{
                margin: px2rem(40px, $base-font-size) auto;
                text-align: center;
                width: px2rem(220px, $base-font-size);
                padding: px2rem(20px, $base-font-size) px2rem(20px, $base-font-size);
                @include px2px('font-size',28);
                background-color: #FEDC00;
                color: #6826AC;
                border-radius: px2rem(20px, $base-font-size);
            }
            .answer-right-result-small{
                position: absolute;
                left: px2rem(190px, $base-font-size);
                top: px2rem(190px, $base-font-size);
                text-align: center;
                img{
                    width: px2rem(100px, $base-font-size);
                    height: px2rem(100px, $base-font-size);
                }
                .answer-mask{
                    width: px2rem(100px, $base-font-size);
                    height: px2rem(100px, $base-font-size);
                    position: absolute;
                    left: px2rem(0px, $base-font-size);
                    top: px2rem(-20px, $base-font-size);
                    border-radius: 50%;
                    background-color: rgba(0,0,0,0.5);
                }
                div{
                    font-family: cursive;
                    @include px2px('font-size',24);
                    margin-top: px2rem(20px, $base-font-size);
                    color: #000;
                }
            }
            .answer-right-result-big{
                position: absolute;
                left: px2rem(270px, $base-font-size);
                top: px2rem(200px, $base-font-size);
                text-align: center;
                img{
                    width: px2rem(180px, $base-font-size);
                    height: px2rem(180px, $base-font-size);
                }
                div{
                    font-family: cursive;
                    @include px2px('font-size',32);
                    margin-top: px2rem(20px, $base-font-size);
                    color: #000;
                }
            }
            .answer-right-result{
                position: absolute;
                left: px2rem(220px, $base-font-size);
                top: px2rem(190px, $base-font-size);
                text-align: center;
                img{
                    width: px2rem(180px, $base-font-size);
                    height: px2rem(180px, $base-font-size);
                }
                div{
                    font-family: cursive;
                    @include px2px('font-size',32);
                    margin-top: px2rem(20px, $base-font-size);
                    color: #000;
                }
            }
        }
    }




    .bind-mobile{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        .bind-mobile-content{
            width: px2rem(600px, $base-font-size);
            height: px2rem(748px, $base-font-size);
            background: #6f2cac;
            background-size: 100%;
            background-repeat: no-repeat;
            z-index: 1000;
            position: relative;
            color: #fff;
            .bind-mobile-top{
                width: 80%;
                margin: px2rem(40px, $base-font-size) auto;
                @include px2px('font-size',28);
                line-height: px2rem(50px, $base-font-size);
                text-align: center;
            }

            .bind-mobile-input-content{
                padding: px2rem(40px, $base-font-size) 0;
                margin: 0 px2rem(40px, $base-font-size);
                .bind-mobile-input-item{
                    display: flex;
                    align-items: center;
                    justify-content:space-between;
                    border-bottom: 1px solid #fff;
                    padding: px2rem(20px, $base-font-size) 0;

                    input{
                        width: px2rem(320px, $base-font-size);
                        @include px2px('font-size',28);
                        height: px2rem(60px, $base-font-size);
                        padding: 0 px2rem(20px, $base-font-size);
                        background: none;
                        border: none;
                        border-right: 1px solid #fff;
                        color: #fff;
                        border-radius: 0;
                    }
                    input::-webkit-input-placeholder{
                        color: #d0cece;
                    }
                }
                .yzm{
                    input{
                        width: 100%;
                        @include px2px('font-size',28);
                        height: px2rem(60px, $base-font-size);
                        padding: 0 px2rem(20px, $base-font-size);
                        background: none;
                        border: none;
                        border-right: none;
                        color: #fff;
                    }
                }
            }
            .bind-mobile-button{
                width: px2rem(420px, $base-font-size);
                margin: px2rem(60px, $base-font-size) auto;
                img{
                    width: 100%;
                    height: 100;
                }
            }
        }
    }
}
